<template>
	<view>
		<!-- 第一部分-顶部 -->
		<view class="items">
			<view class="item">
				<view class="item-xs">推送</view>
				<view class="item-x">千里眼</view>
				<view class="item-x">搞笑</view>
				<view class="item-x">娱乐</view>
				<view class="item-x">社会</view>
				<view class="item-x">音乐</view>
				<view class="item-x">科技</view>
			</view>
		</view>
		<view class="iten-ss"></view>
		<!-- 第二部分-视频 -->
		<view class="sp">
			<navigator url="../videoinfo/videoinfo"hover-class="navigator-hover">
				<view class="x">600斤的公牛不甘心被杀，宁愿跳进大海之中。结局令人遗憾</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;"
				src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4">
			</video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">好吃的好玩的</view>
					<view class="wenzizf" style="color: #999999;margin-top: orpx;"></view>
					<view class="wenzizf" style="font-size: 32rpx;color: #DD524D;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		<!-- 第二部分-视频2 -->
		<view class="sp">
			<navigator url="">
				<view class="x">这些箱子里装的中高档卷烟共有1350余条。27万预支</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;"
				src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4">
			</video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">往事随风而去...</view>
					<view class="wenzizf" style="color: #999999;margin-top: orpx;"></view>
					<view class="wenzizf" style="font-size: 32rpx;color: #DD524D;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		<!-- 第二部分-视频3 -->
		<view class="sp">
			<navigator url="">
				<view class="x">一个”背包客“从郑州坐火车往返江南某市。。。</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;"
				src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4">
			</video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">微笑面对一切...</view>
					<view class="wenzizf" style="color: #999999;margin-top: orpx;"></view>
					<view class="wenzizf" style="font-size: 32rpx;color: #DD524D;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		<!-- 第二部分-视频4 -->
		<view class="sp">
			<navigator url="">
				<view class="x">原来，4月24日，该局执法人员奔赴江南某市火车站</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;"
				src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4">
			</video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../../static/logo.png"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">每天开开心心...</view>
					<view class="wenzizf" style="color: #999999;margin-top: orpx;"></view>
					<view class="wenzizf" style="font-size: 32rpx;color: #DD524D;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png">
						</image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png">
						</image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		<!-- 第二部分-视频5 -->
		<view class="sp">
			<navigator url="">
				<view class="x">新郑市烟草与公安部门顺藤摸瓜，连夜驱车奔赴江南某市</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../../static/logo.png">
						</image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">一起开玩耍吧...</view>
					<view class="wenzizf" style="color: #999999;margin-top: orpx;"></view>
					<view class="wenzizf" style="font-size: 32rpx;color: #DD524D;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png">
						</image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/logo.png">
						</image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"navigator"
    
			}
		},
		methods: {

		}
	}
</script>

<style>
	.items {
		background-color: #ffffff;
		position: flxed;
		/* 固定位置新闻条的时候使用 */
		z-index: 1;
		/* 显示层级，设置在最上面 */
		width: 100%;
		top: 90rpx;
	}

	.item {
		background-color: #ffffff;
		display: flex;
		/* 显示在同一行 */
		flex-direction: row;
		/* 在同一行显示。两个同事用才会显示在一行 */
		margin: 5rpx 10rpx 20rpx 10rpx;
		font-size: 40rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.item-ss {
		width: 100%;
		height: 69rpx;
	}

	/* 选项卡 */
	.tab_title view {
		display: inline-block;
		/* 一行内显示，没有加。的view表示概括定义在这个标签下的view标签 */
		margin-left: 30rpx;
		line-height: 30rpx;
		/* 文字行高 */
		color: #ffffff;
	}

	.dibu {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.wenzi {
		display: flex;
		flex-direction: row;
	}

	.tupian {
		display: flex;
		flex-direction: row;
	}

	.tupiandx {
		margin-left: 60rpx;
	}

	.wenzizf {
		margin-right: 20rpx;
	}

	.x {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		height: 100%;
	}

	.item-xs {
		color: #DD524D;
		font-weight: bold;
	}

	.a {
		margin-right: 120rpx;
		height: 50rpx;
	}

	.ap image {
		width: 250rpx;
		height: 100rpx;
	}

	.ap {
		border-radius: 10rpx;
		width: 250rpx;
		height: 100rpx;
		overflow: hidden;
		margin: auto;
	}

	.b {}

	.scroll_x {
		height: 50rpx;
		width: 100%;
		white-space: nowrap;
		/* 强制在一行内显示 */
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #333333;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #C8C7CC;
	}

	.tab_title {
		/* 表示在 tab_title下面所有view都一样显示*/
		display: inline-block;
		/* 在一行内显示 */
		margin-left: 10rpx;
		height: 80rpx;
		line-height: 70rpx;
		/* 文字行高 */
		color: #333333;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #C8C7CC;
	}

	.tab-x {
		color: #333333;
		background-color: #ffffff;
	}

	.scroll_x {
		height: 60rpx;
		width: 100%;
		white-space: nowrap;
	}

	.gray {
		color: #C8C7CC;

	}

	.gray1 {
		color: #DD524D;
	}

	.hd {
		display: inline-block;
		/* 在一行内显示 */
	}

	.tab {
		background-color: #DD524D;
	}

	.shgd {
		position: fixed;
		/* 固定位置 */
		position: absolute;
		/* xx笃定位置 */
		z-index: 1;
	}

	/* 隐藏导航条 */
	scroll-view::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.sp {
		border-bottom: 1rpx solid #e5eaf3;
		margin: 10rpx 10rpx 20rpx 20rpx;
	}

	.red-rigth {
		color: #DD524D;
		margin-right: 10rpx;
		padding-left: 10rpx;
	}

	.z {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
		height: 70rpx;
	}

	.zs {
		display: flex;
	}

	.z1 {
		margin-bottom: 10rpx;
		margin-right: 300rpx;
		margin-top: 20rpx;
	}

	.z-h {
		height: 60rpx;
		margin-right: 10rpx;
		display: flex;
		flex-direction: row;
		font-size: 35rpx;
	}

	.z-z {
		font-size: 30rpx;
		color: #C8C7CC;
	}

	.z-z1 {
		font-size: 30rpx;
		color: #C8C7CC;
		margin: 20rpx;
	}

	.z-z2 {
		font-size: 30rpx;
		color: #C8C7CC;
		margin: 20rpx;
	}

	.y {
		margin: 0rpx;
		flex: 1;
		/* 自动适应宽度 */
	}
</style>
